<template>
    <template v-if="isMwebRoute">
        <m-layout v-show="true"></m-layout>
    </template>
    <RouterView />
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router'
import { computed, onMounted, onUnmounted, watch } from 'vue'
import mLayout from '@/layouts/mobile/layout.vue';
import { ROUTES } from '@/constants/routes.js'
import { isPC } from '@/service/commonService'

const route = useRoute()
const router = useRouter()

const isMwebRoute = computed(() => {
    return route.path.includes('mweb');
});

// 监听路由变化和屏幕尺寸变化，根据设备类型自动跳转
const handleRouteRedirect = () => {
    // 如果是PC端但访问的是移动端路由，跳转到PC端空白页
    if (isPC() && route.path.includes('mweb')) {
        router.push(ROUTES.HARDCODE_WEB_BLANK);
    }
    // 如果是移动端但访问的是PC端路由，跳转到移动端
    else if (!isPC() && route.path.includes('web') && !route.path.includes('mweb')) {
        router.push(ROUTES.HARDCODE_MWEB);
    }
}

// 监听路由变化
watch(() => route.path, handleRouteRedirect)

// 监听窗口大小变化
onMounted(() => {
    handleRouteRedirect(); // 初始加载时检查
    window.addEventListener('resize', handleRouteRedirect);
})

// 组件卸载时移除事件监听器
onUnmounted(() => {
    window.removeEventListener('resize', handleRouteRedirect);
})

</script>